<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>jQuery 新浪表情插件 Demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link rel="stylesheet" href="dist/jquery-sina-emotion.min.css"/>
	<style type="text/css">
	body {
		color: #345;
		font-size: 14px;
		background: #f1f3f5;
		text-align: center;
	}

	body, textarea {
		font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
	}

	a {
		color: #345;
	}

	a:hover {
		color: #745fb5;
	}

	#title {
		font-weight: normal;
	}

	#desc {
		color: #678;
		line-height: 30px;
		margin: 0 0 30px 0;
	}

	#form {
		margin: 20px 0;
	}

	#article,
	#content {
		width: 500px;
		height: 100px;
		margin: 5px auto;
		padding: 5px 8px;
		text-align: left;
		background: #f8f9fa;
		box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
	}

	#article .sina-emotion {
		vertical-align: middle;
	}

	#content {
		padding: 8px;
		resize: none;
		border: none;
		outline: none;
		font-size: 14px;
		background: #fff;
		box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
	}

	.button {
		color: #fff;
		border: none;
		outline: none;
		margin: 0 5px;
		padding: 8px 16px;
		border-radius: 3px;
		background: #678;
		background: linear-gradient(15deg, #678, #6f8793);
		box-shadow: 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
	}

	.button:hover {
		background: #89a;
	}

	.button:active {
		background: #556371;
	}
	</style>
</head>
<body>
<h1 id="title">jQuery Sina Emotion</h1>
<p id="desc">
	一个用于方便快速地创建新浪微博表情选择对话框的 jQuery 插件。<br>
	（
	<a target="_blank" href="https://www.npmjs.com/package/jquery-sina-emotion">npm</a> |
	<a target="_blank" href="https://github.com/Lanfei/jquery-sina-emotion">GitHub</a> |
	<a target="_blank" href="https://gitee.com/lanfei/jquery-sina-emotion">码云</a>
	）
</p>
<p id="article">
	请编辑内容，插入表情后点击解析按钮。
</p>
<form id="form">
	<p>
		<label><textarea id="content">欢迎使用 jQuery Sina Emotion [微笑]</textarea></label>
	</p>
	<input id="face" class="button" type="button" value="表 情"/>
	<input class="button" type="submit" value="解 析"/>
</form>

<script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
<script src="src/jquery-sina-emotion.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-57981079-1"></script>
<script>
$('#form').bind({
	submit: function (e) {
		var content = $('#content').val();
		$('#article').html(content).parseEmotion();
		e.preventDefault();
	}
});
$('#face').bind({
	click: function (event) {
		if (!$('#sinaEmotion').is(':visible')) {
			$(this).sinaEmotion();
			event.stopPropagation();
		}
	}
});
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-57981079-1');
gtag('event', 'pv', {event_category: 'jquery-sina-emotion'});
</script>
</body>
</html>